<template>
    <div>
        <h1>用户管理系统大威天龙</h1>
        <el-button type="primary" @click="goToAddPage">添加用户</el-button>
        <el-button type="primary" @click="goToTestPage">测试页面</el-button>
        <el-table :data="users" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="company.name" label="公司"></el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router'; // 引入路由对象,用于页面跳转
const users = ref([]);
const router = useRouter(); // 初始化路由对象

onMounted(async () => {
    try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
    }
    catch (error) {
        console.error('获取用户列表失败:', error);
    }
});
const goToAddPage = () => {
    router.push('/add');
};
const goToTestPage = () => {
    router.push('/test');
};
</script>